<template>
  <div class="right1">
    <div class="bt">
      <div class="tit1">设备信息</div>
    </div>
      <div class="bottom">
        <img src="@/assets/img/byc.png"  @click="showDate"/>
      </div>
      <div class="partRightOne" ref="rightOneEcharts">

    </div>

    <div class="yuan">
      <div class="ytext"  >智能气象站</div>
    </div>
    <div class="yuan">
      <div class="ytext" >虫情测报仪</div>
    </div>
    <div class="yuan">
      <div class="ytext"  >智能杀虫灯</div>
    </div>
  </div>

</template>
<script setup>
import { onMounted ,ref} from "vue";
import router from "@/router";
import 'echarts-liquidfill'//水球图 插件
import * as echarts from "echarts";
// import 'echarts-gl';
let showDate = function () {
  location.reload(true)
}

const rightOneEcharts=ref();
onMounted(()=>{
  const mycharts=echarts.init(rightOneEcharts.value);
  const option ={
    series: [{
      type: 'liquidFill',
      center: ['9%',
        '51%'],
      radius: '60%',
      color: ['#7ca5ff','#7ca5ff',
        '#7ca5ff'],
      //水波颜色
      data: [0.25],//水波百分比
      itemStyle: {
        normal: {
          shadowBlur: 0
        }
      },
      label: {
        normal: {
          formatter: function(item) {
            //   return (item.value * 100).toFixed(1) + '%'
            return 6
          },
          color: '#fff',
          insideColor: '#fff',
          fontSize: 30
        }
      },
      backgroundStyle: {
        borderWidth: 3,
        borderColor: '#7ca5ff',
        color: 'rgb(255,0,255,0.01)'
      },
      outline: {
        borderDistance: 15,
        itemStyle: {
          borderWidth: 0,
          borderColor: '#7ca5ff',
          borderType: 'dashed',
        }
      },
    },
      {
        type: 'liquidFill',
        center: ['42%',
          '51%'],
        radius: '60%',
        color: ['#7ca5ff',
          '#7ca5ff'],
        //水波颜色
        data: [0.25],
        itemStyle: {
          normal: {
            shadowBlur: 0
          }
        },
        label: {
          normal: {
            formatter: function(item) {
              // return (item.value * 100).toFixed(1) + '%'
              return 8
            },
            // textStyle: {
            color: '#fff',
            insideColor: '#fff',
            fontSize: 30
            // }
          }
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: '#7ca5ff',
          color: 'rgb(255,0,255,0.01)'
        },
        outline: {
          borderDistance: 15,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#7ca5ff',
            borderType: 'dashed',
          }
        },
      },
      {
        type: 'liquidFill',
        center: ['75%',
          '51%'],
        radius: '60%',
        color: ['#7ca5ff',
          '#7ca5ff'],
        //水波颜色
        data: [0.25],
        itemStyle: {
          normal: {
            shadowBlur: 0
          }
        },
        label: {
          normal: {
            formatter: function(item) {
              // return (item.value * 100).toFixed(1) + '%'
              return 10
            },
            // textStyle: {
            color: '#fff',
            insideColor: '#fff',
            fontSize: 30
            // }
          }
        },
        backgroundStyle: {
          borderWidth: 2,
          borderColor: '#7ca5ff',
          color: 'rgb(255,0,255,0.01)'
        },
        outline: {
          borderDistance: 15,
          itemStyle: {
            borderWidth: 0,
            borderColor: '#7ca5ff',
            borderType: 'dashed',
          }
        },
      },
    ]
  }
  mycharts.setOption(option);

})

</script>
<style lang="scss" scoped>
.partRightOne{
    width: 85%;
    height: 70%;
  float: right;
}
.right1 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: 94px;
  float: left;
}
.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}
.tit1 {
  width: auto;
  height: 40px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top, #78bcf7, #f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
  /*定义文本颜色为透明*/
}
.bottom{
  width: 6%;
  height: 30px;
  float: left;
  margin-left: 20px;
  background-image: url(@/assets/img/button.png);
  background-size: 100% 100%;
}
.bottom img{
  display: block;
  width: 30px;
  height: 30px;
}
.bottom:hover{
  color: #ffffff;
  border-bottom: rgba(76,173,255,0.7) 2px solid;
  border-top: rgba(76,173,255,0.7) 2px solid;
}
.yuan {
  width: 23%;
  float: left;
  margin-top: -45px;
  margin-right: -24px;
  margin-left: 50px;
}
.ytext{
  color: #ffffff;
  font-size: 15px;
  text-align: center;
  line-height: 60px;
}
</style>


<!--<template>-->
<!--    <div class="right1">-->
<!--      <div class="bt">-->
<!--        <div class="tit1">设备信息</div>-->
<!--      </div>-->
<!--      <div class="bottom">-->
<!--        <img src="@/assets/img/byc.png" @click="showdate"/>-->
<!--      </div>-->
<!--      <div class="yuan">-->
<!--        <img src="@/assets/img/yq1.png"/>-->
<!--        <div class="ytext"  >智能气象站</div>-->
<!--      </div>-->
<!--      <div class="yuan">-->
<!--        <img src="@/assets/img/yq.png"/>-->
<!--        <div class="ytext" >虫情测报仪</div>-->
<!--      </div>-->
<!--      <div class="yuan">-->
<!--        <img src="@/assets/img/yq.png"/>-->
<!--        <div class="ytext"  >智能杀虫灯</div>-->
<!--      </div>-->
<!--    </div>-->

<!--</template>-->
<!--<script setup>-->
<!--import router from "@/router";-->
<!--let showdate = function (){-->
<!--  router.push('/nqdt')-->
<!--}-->
<!--</script>-->

<!--<style lang="scss" scoped>-->
<!--.right1 {-->
<!--  width: 25%;-->
<!--  height: calc(100% / 3 - 57px);-->
<!--  background-image: url("@/assets/img/backg1.png");-->
<!--  background-size: 100% 100%;-->
<!--  position: fixed;-->
<!--  top: 94px;-->
<!--  float: left;-->
<!--}-->
<!--.bt {-->
<!--  width: calc(100% - 24px);-->
<!--  height: 40px;-->
<!--  margin-left: 24px;-->
<!--  float: left;-->
<!--  line-height: 40px;-->
<!--}-->
<!--.tit1 {-->
<!--  width: auto;-->
<!--  height: 40px;-->
<!--  padding-right: 4px;-->
<!--  font-size: 13px;-->
<!--  font-weight: bold;-->
<!--  background: linear-gradient(to top, #78bcf7, #f9fcff);-->
<!--  -webkit-background-clip: text;-->
<!--  color: transparent;-->
<!--  float: left;-->
<!--  /*定义文本颜色为透明*/-->
<!--}-->
<!--.bottom{-->
<!--  width: 30px;-->
<!--  height: 30px;-->
<!--  float: left;-->
<!--  margin-left: 20px;-->
<!--  background-image: url(@/assets/img/button.png);-->
<!--  background-size: 100% 100%;-->
<!--}-->
<!--.bottom img{-->
<!--  display: block;-->
<!--  width: 30px;-->
<!--  height: 30px;-->
<!--}-->
<!--.bottom:hover{-->
<!--  color: #ffffff;-->
<!--  border-bottom: rgba(76,173,255,0.7) 2px solid;-->
<!--  border-top: rgba(76,173,255,0.7) 2px solid;-->
<!--}-->
<!--.yuan {-->
<!--  width: 30%;-->
<!--  float: left;-->
<!--  margin-top: 45px;-->
<!--  margin-right: 1px;-->
<!--  margin-left: -10px;-->
<!--}-->
<!--/*.yuan-2{*/-->
<!--/*  width: 30%;*/-->
<!--/*  float: left;*/-->
<!--/*  margin-top: 50px;*/-->
<!--/*  margin-right: 1px;*/-->
<!--/*  margin-left: -10px;*/-->
<!--/*}*/-->
<!--.ytext{-->
<!--  color: #ffffff;-->
<!--  font-size: 14px;-->
<!--  text-align: center;-->
<!--  line-height: 50px;-->
<!--}-->
<!--</style>-->

